<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Zofund JobDispatcher</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>

</head>

<body data-type="jobbuilder">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <div class="am-fl tpl-header-logo">
                <div class="am-fl tpl-header-switch-button am-icon-list"><span></span></div>
            </div>
        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar">
            <!-- 菜单 -->
            <ul class="sidebar-nav">
                <li class="sidebar-nav-link">
                    <a href="index.html" class="active">
                        <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="historyjob-list.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>历史Job
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="jobeditor.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>job编辑器
                    </a>
                </li>
               <!--  <li class="sidebar-nav-link">
                    <a href="tables.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="calendar.html">
                        <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="form.html">
                        <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单

                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="chart.html">
                        <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表

                    </a>
                </li>

                <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
                <li class="sidebar-nav-link">
                    <a href="javascript:;" class="sidebar-nav-sub-title">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                        <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                    </a>
                    <ul class="sidebar-nav sidebar-nav-sub">
                        <li class="sidebar-nav-link">
                            <a href="table-list.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
                            </a>
                        </li>

                        <li class="sidebar-nav-link">
                            <a href="table-list-img.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-nav-link">
                    <a href="sign-up.html">
                        <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
                        <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="login.html">
                        <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="404.html">
                        <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
                    </a>
                </li>
 -->
            </ul>
        </div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span>Job的拓扑结构图<small>Amaze UI</small></div>
                        <p class="page-header-description">图表组件使用的是 <a href="http://echarts.baidu.com">百度图表echarts</a>。</p>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf" style="height:100vh;">
                <div class="widget am-cf" style="height: 100%">
                    <div class="widget-body am-fr" style="height: 100%">
                        <div style="height: 100%" class="" id="jobbuilder">

                        </div>
                    </div>
                </div>

               </div>
        </div>
    </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/amazeui.datatables.min.js"></script>
    <script src="assets/js/dataTables.responsive.min.js"></script>
    <script src="assets/js/app.js"></script>
    <script>
    $(function(){ 
        	   var jobCode = GetQueryString("jobcode");
        		//Ajax调用处理
        	       $.ajax({
        	          type: "GET",
        	          url: "graph/quartzjob?jobcode="+jobCode,
        	          success: function(data){
        	       	    // 基于准备好的dom，初始化echarts实例
        	       	    var myChart = echarts.init(document.getElementById('jobbuilder'));
        					if(null!=data&&null!=data.nodes&&null!=data.links){
        						  var myData = data.nodes;
        						  var myLinks = data.links;
        	                  // 指定图表的配置项和数据
        	                     option = {
        	                     title: {
        	                         textStyle:{ //设置主标题风格
        	                        	 color:'white'//设置主标题字体颜色
    	                    		  },
        	                         text: 'Job:'+jobCode+'拓扑结构图'
        	                     },
        	                     tooltip: {},
        	                     animationDurationUpdate: 1500,
        	                     animationEasingUpdate: 'quinticInOut',
        	                     formatter: function(params){//触发之后返回的参数，这个函数是关键
        	                    	 if("node"==params.dataType){
        	                    		 if (typeof(params.data.overTime) != undefined){
        	                    			 return "任务接口地址为"+ params.data.taskUrl +",设定的超时提醒时间为"+params.data.overTime+"分钟";
        	                    		 }
        	                    	   	return "任务接口地址为"+ params.data.taskUrl +",设定的超时提醒时间未设定";
        	                     	 }
        	                        if("edge"==params.dataType){
        	                        	return "从"+ params.data.source + "到"+ params.data.target;
    	                     	    }
        	                      },
        	                     series : [
        	                         {
        	                             type: 'graph',
        	                             layout: 'none',
        	                             symbolSize: 20,
        	                             barwidth:100,
        	                             roam: true,
        	                             label: {
        	                                 normal: {
        	                               	    show:true,                  //是否显示标签。
        	                               	    color:'black',
        	                               	    position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
        	                               	    offset:[0, 0],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
        	                               	    formatter: function(params){
        	                                           return params.data.name;
        	                                       }       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
        	                               	}
        	                             },
        	                             edgeSymbol: ['circle', 'arrow'],
        	                             edgeSymbolSize: [4, 10],
        	                             edgeLabel: {
        	                                 normal: {
        	                                     textStyle: {
        	                                         fontSize: 20
        	                                     }
        	                                 }
        	                             },
        	                             data: myData,
        	                             links: myLinks,
        	                             lineStyle: {
        	                                 normal: {
        	                                     opacity: 0.9,
        	                                     width: 2,
        	                                     curveness: 0
        	                                 }
        	                             }
        	                         }
        	                     ]
        	                 	};
        	                  
        	                   // 使用刚指定的配置项和数据显示图表。
        	                   myChart.setOption(option);
        						}
        	             }
        	   });
  	  });
     </script>
</body>

</html>